import { useState } from "react";
const Two02 = () => {
    const [arr] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
    const [arr2] = useState([{ name: "张三", age: 18 }, { name: "李四", age: 19 }, { name: "王五", age: 20 }])
    const [arr3] = useState([{
        "users": [
            {
                "uid": 73563,
                "name": "Chelsea Jast",
                "pictures": [
                    "http://dummyimage.com/491x216.png/5d2b69/2a3351",
                    "http://dummyimage.com/194x156.png/3c0f0d/7f3e48",
                    "http://dummyimage.com/329x487.png/7e5034/2a3a21",
                    "http://dummyimage.com/268x133.png/345d78/226961"
                ]
            },
            {
                "uid": 56369,
                "name": "Charles Stamm IV",
                "pictures": [
                    "http://dummyimage.com/310x267.png/326b23/16410c",
                    "http://dummyimage.com/386x235.png/262d06/694812",
                    "http://dummyimage.com/492x481.png/7b5c35/43147c",
                    "http://dummyimage.com/417x446.png/3b6312/3a2b13"
                ]
            }
        ]
    }])
    return (
        <div>
            <h3>普通数组</h3>
            {arr.map((item, index) => {
                return <p key={index}>{item}</p>
            })}
            <h3>复杂数组</h3>
            {arr2.map((item, index) => {
                return <p key={index}>{item.name}+{item.age}</p>
            })}
            <h3>嵌套数组</h3>
            <>
                {arr3.map((item) => {
                    return (
                        <div key={item.uid}>
                            {item.users.map((item1, index1) => {
                                return (
                                    <div key={index1}>
                                        <p>{item1.name}</p>
                                        <ul>
                                            {item1.pictures.map((item2, index2) => {
                                                return (
                                                    <li key={index2}>
                                                        <img src={item2} alt="" />
                                                    </li>
                                                );
                                            })}
                                        </ul>
                                    </div>
                                );
                            })}
                        </div>

                    );
                })}
            </>
        </div>
    )
}
export default Two02;